<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue'
import http from '../../api/http'
import type { Imenu } from '@/types/menu'
import Create from "@/views/Menu/Create.vue"
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import Edit from "@/views/Menu/Edit.vue"

const cancelEvent = () => {
  console.log('cancel!')
}

//#region  列表分页查询相关
const tableData: Imenu[] = reactive([])
const likename = ref('')
const page = ref(1)
const size = ref(3)
const total = ref(0)
//查询用户数据
const getroles = () => {
    http.getList<Imenu>('Menus/page', { page: page.value, size: size.value, name: likename.value })
        .then(res => {
            total.value = res.count
            tableData.length = 0
            tableData.push(...res.data)
        }).catch(err => {
            console.log('err: ', err);
        })
}
//每页数量的改变事件
const handleSizeChange = (val: number) => {
    size.value = val
    getroles()
}
//翻页
const handleCurrentChange = (val: number) => {
    page.value = val
    getroles()
}
//#endregion
const formData = ref({
    menuId:0,
    menuName:'',
    icon:'',
    parentId:0,
    url:'',
    lastTime:new Date()
})
const editDialogVisible = ref(false)
const edit = (row:Imenu) => {
    formData.value = row
    //弹出修改框
    editDialogVisible.value = true

}
const authDialogVisible =ref(false)
//#region  添加
const createDialogVisible = ref(false)
const create = () => { 
    //弹出添加框
    createDialogVisible.value=true
}
//#endregion 

//#region 单个删除
const del = (id:number) => { 
  http.delete('Menus',{id:id}).then(res=>{
  if (res.code == '1') {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                //刷新
                getroles();
            }
            else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }


  })
}
//#endregion
onMounted(()=>{
    getroles();
})





</script>

<template>


    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- 头部 操作 -->
        <template #header>
            <div class="card-header">
                <el-button type="success" @click="create()">添加</el-button>
              

                <el-input v-model="likename" style="max-width: 300px;margin-left: 12px;" placeholder="请输入菜单名称"
                    class="input-with-select">
                    <template #append>
                        <el-button type="primary" @click="getroles()">搜索</el-button>
                     
                    </template>
                </el-input>
                 
                
            </div>
        </template>
        <!-- 数据表 -->
        <el-table :data="tableData" stripe style="width: 100%" >
            <el-table-column prop="menuId" label="菜单编号" width="80" />
            <el-table-column prop="menuName" label="菜单名称" width="120" />
             <el-table-column prop="parentId" label="菜单级别" width="80" />
            <el-table-column prop="icon" label="图标" width="60" />
            <el-table-column prop="url" label="地址" width="120" />
            <el-table-column label="操作" fixed="right" width="200">
                <template #default="{ row }">
                    <div style="display: flex;">
                      <el-button type="warning" size="small" @click="edit(row)">修改</el-button>
                       
                   <el-popconfirm
    confirm-button-text="Yes"
    cancel-button-text="No"
    :icon="InfoFilled"
    icon-color="#626AEF"
    :title="'确定删除【' + row.menuName + '】?'"
    @confirm="del(row.menuId)"
    @cancel="cancelEvent"
  >
    <template #reference>
      <el-button size="small" type="danger">删除</el-button>
    </template>
  </el-popconfirm>
  
  </div>
  </template>
               
               
            </el-table-column>
        </el-table>
        <!-- 底部 分页 -->
        <template #footer>
            <el-pagination v-model:current-page="page" 
                v-model:page-size="size" :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
    </el-card>


   
    <Create v-model="createDialogVisible" @refresh="getroles"></Create>
       <Edit v-model="editDialogVisible" :formData="formData" @refresh="getroles"></Edit>
    
</template>


<style scoped></style>